import React, {useContext, useEffect, useState} from 'react';
import {Button, Card, Image, message, Popover} from "antd";
import {useLocation, useNavigate, useParams} from "react-router-dom";
import {useSelector} from "react-redux";
import {reqGetBuyShoppingStatus, reqGetShoppingById} from "../../../../api/frontDesk/frontDeskApi";
import {getToken} from "../../../../utils/token";
import LoginAlert from "../../../../component/LoginAlert";

let timer = null
const BuyShopping = () => {

    const nav = useNavigate()

    const params = useParams()

    const [qrcodeUrl, setQrcodeUrl] = useState('')
    const [open, setOpen] = useState(false)
    const [shop, setShop] = useState({})

    const {userAllInfo} = useSelector(state => state.persistedReducer.user)

    useEffect(() => {
        const getInfo = async () => {
            const result = await reqGetShoppingById(params.id)
            setShop(result.data)
        }
        getInfo()
    }, [])

    const content = (
        <div>
            <img width={300} alt='' src={qrcodeUrl}></img>
        </div>
    );

    const buyShopping = async () => {
        if (getToken()) {
            try {
                //获取到二维码
                const result = await reqGetBuyShoppingStatus({shopping_id: shop.id, user_id: userAllInfo.id})
                setQrcodeUrl(result.codeUrl)
                timer = setInterval(async () => {
                    let {scan} = await reqGetBuyShoppingStatus({shopping_id: shop.id, user_id: userAllInfo.id})
                    if (scan) {
                        clearInterval(timer)
                        timer = null
                        scan = false
                        message.success('支付成功')
                        nav('/my-cart')
                    }
                }, 1000)
            } catch (err) {
                message.error('支付失败!')
            }
        } else {
            setOpen(!open)
        }

    }

    const leave = () => {
        clearInterval(timer)
    }

    return (
        <div>
            <Card style={{height: 600}}>
                <div style={{display: 'flex', justifyContent: 'space-around'}}>
                    <Image width={300} src={shop.cover}/>
                    <div style={{
                        display: 'flex',
                        flexDirection: 'column',
                        justifyContent: 'space-around'
                    }}>
                        <span style={{
                            fontSize: 18,
                            fontWeight: 700,
                            lineHeight: 1.5
                        }}>{shop.shop_name}</span>
                        <span style={{color: '#f60', fontSize: 30}}>价格：￥{shop.price}</span>
                        <span>库存：{shop.num}件</span>
                        <div style={{position: "relative", right: 0, width: 80}}>
                            <Popover content={content}>
                                <Button onMouseLeave={() => leave()} onMouseEnter={() => buyShopping()}
                                        type="primary">立即购买</Button>
                            </Popover>
                        </div>
                    </div>
                </div>
                {open && <LoginAlert open={open}></LoginAlert>}
            </Card>
        </div>
    );
};

export default BuyShopping;